<template>
  <footer class="footer bg-dark text-light">
    <div class="container py-5">
      <div class="row">
        <!-- 关于博客 -->
        <div class="col-lg-4 col-md-6 mb-4">
          <div class="footer-section">
            <h5 class="footer-title mb-4">
              <i class="bi bi-journal-bookmark me-2"></i>关于博客
            </h5>
            <p class="text-light-50 mb-4">
              这里记录着我的技术分享、生活感悟和成长历程。
              希望能与你分享知识和经验，共同进步。
            </p>
            <div class="social-links">
              <a href="#" class="social-link me-3" title="GitHub">
                <i class="bi bi-github"></i>
              </a>
              <a href="#" class="social-link me-3" title="LinkedIn">
                <i class="bi bi-linkedin"></i>
              </a>
              <a href="#" class="social-link me-3" title="Twitter">
                <i class="bi bi-twitter"></i>
              </a>
              <a href="#" class="social-link me-3" title="微信">
                <i class="bi bi-wechat"></i>
              </a>
              <a href="#" class="social-link" title="RSS">
                <i class="bi bi-rss"></i>
              </a>
            </div>
          </div>
        </div>

        <!-- 快速导航 -->
        <div class="col-lg-2 col-md-6 mb-4">
          <div class="footer-section">
            <h5 class="footer-title mb-4">
              <i class="bi bi-compass me-2"></i>导航
            </h5>
            <ul class="list-unstyled footer-links">
              <li class="mb-2">
                <router-link to="/" class="footer-link">
                  <i class="bi bi-house me-2"></i>首页
                </router-link>
              </li>
              <li class="mb-2">
                <router-link to="/blog" class="footer-link">
                  <i class="bi bi-journal-text me-2"></i>文章
                </router-link>
              </li>
              <li class="mb-2">
                <router-link to="/about" class="footer-link">
                  <i class="bi bi-person me-2"></i>关于我
                </router-link>
              </li>
              <li class="mb-2">
                <router-link to="/contact" class="footer-link">
                  <i class="bi bi-envelope me-2"></i>联系
                </router-link>
              </li>
            </ul>
          </div>
        </div>

        <!-- 文章分类 -->
        <div class="col-lg-3 col-md-6 mb-4">
          <div class="footer-section">
            <h5 class="footer-title mb-4">
              <i class="bi bi-tags me-2"></i>分类
            </h5>
            <ul class="list-unstyled footer-links">
              <li class="mb-2">
                <a href="#" class="footer-link">
                  <i class="bi bi-code-slash me-2"></i>技术分享
                  <span class="badge bg-primary ms-2">15</span>
                </a>
              </li>
              <li class="mb-2">
                <a href="#" class="footer-link">
                  <i class="bi bi-book me-2"></i>学习笔记
                  <span class="badge bg-success ms-2">8</span>
                </a>
              </li>
              <li class="mb-2">
                <a href="#" class="footer-link">
                  <i class="bi bi-heart me-2"></i>生活随笔
                  <span class="badge bg-info ms-2">6</span>
                </a>
              </li>
              <li class="mb-2">
                <a href="#" class="footer-link">
                  <i class="bi bi-briefcase me-2"></i>项目经验
                  <span class="badge bg-warning ms-2">4</span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 联系信息 -->
        <div class="col-lg-3 col-md-6 mb-4">
          <div class="footer-section">
            <h5 class="footer-title mb-4">
              <i class="bi bi-person-lines-fill me-2"></i>联系我
            </h5>
            <div class="contact-info">
              <div class="contact-item mb-3">
                <i class="bi bi-envelope text-primary me-3"></i>
                <div>
                  <div class="fw-semibold mb-1">邮箱</div>
                  <a href="mailto:your-email@example.com" class="footer-link">
                   495102569@qq.com
                  </a>
                </div>
              </div>
              <div class="contact-item mb-3">
                <i class="bi bi-geo-alt text-primary me-3"></i>
                <div>
                  <div class="fw-semibold mb-1">位置</div>
                  <span class="text-light-50">中国，某个美丽的城市</span>
                </div>
              </div>
              <div class="contact-item">
                <i class="bi bi-clock text-primary me-3"></i>
                <div>
                  <div class="fw-semibold mb-1">在线时间</div>
                  <span class="text-light-50">周一至周日 9:00-21:00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="row mt-4 pt-4 border-top border-secondary">
        <div class="col-lg-8">
          <div class="stats-section">
            <div class="row text-center">
              <div class="col-6 col-md-3 mb-3">
                <div class="stat-item">
                  <div class="stat-number">{{ stats.articles }}</div>
                  <div class="stat-label">篇文章</div>
                </div>
              </div>
              <div class="col-6 col-md-3 mb-3">
                <div class="stat-item">
                  <div class="stat-number">{{ stats.views }}</div>
                  <div class="stat-label">次阅读</div>
                </div>
              </div>
              <div class="col-6 col-md-3 mb-3">
                <div class="stat-item">
                  <div class="stat-number">{{ stats.comments }}</div>
                  <div class="stat-label">条评论</div>
                </div>
              </div>
              <div class="col-6 col-md-3 mb-3">
                <div class="stat-item">
                  <div class="stat-number">{{ stats.days }}</div>
                  <div class="stat-label">天运行</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 text-lg-end">
          <div class="newsletter-section">
            <h6 class="mb-3">订阅更新</h6>
            <div class="input-group">
              <input 
                type="email" 
                class="form-control" 
                placeholder="输入邮箱地址"
                v-model="email"
              >
              <button class="btn btn-primary" type="button" @click="subscribe">
                <i class="bi bi-send"></i>
              </button>
            </div>
            <small class="text-light-50 d-block mt-2">
              获取最新文章推送
            </small>
          </div>
        </div>
      </div>
    </div>

    <!-- 版权信息 -->
    <div class="footer-bottom bg-darker py-3">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="copyright text-center text-md-start">
              <p class="mb-0 text-light-50">
                &copy; {{ currentYear }} 我的博客. 保留所有权利.
              </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="footer-menu text-center text-md-end">
              <a href="#" class="footer-link me-3">隐私政策</a>
              <a href="#" class="footer-link me-3">使用条款</a>
              <a href="#" class="footer-link">站点地图</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'TheFooter',
  data() {
    return {
      email: '',
      stats: {
        articles: 33,
        views: '12.5k',
        comments: 456,
        days: this.calculateDays()
      }
    }
  },
  computed: {
    currentYear() {
      return new Date().getFullYear()
    }
  },
  methods: {
    calculateDays() {
      const startDate = new Date('2025-09-13')
      const currentDate = new Date()
      const diffTime = Math.abs(currentDate - startDate)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      return diffDays
    },
    subscribe() {
      if (this.email && this.isValidEmail(this.email)) {
        // 这里可以添加订阅逻辑
        alert('订阅成功！感谢您的支持！')
        this.email = ''
      } else {
        alert('请输入有效的邮箱地址')
      }
    },
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(email)
    }
  }
}
</script>

<style scoped>
.footer {
  margin-top: auto;
  background: rgba(33, 37, 41, 0.90) !important;
  backdrop-filter: blur(15px);
}

.footer-title {
  color: #fff;
  font-weight: 600;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(45deg, #0d6efd, #6f42c1);
  border-radius: 1px;
}

.text-light-50 {
  color: rgba(255, 255, 255, 0.7) !important;
}

.footer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.footer-link:hover {
  color: #66b3ff;
  transform: translateX(5px);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background: #0d6efd;
  color: #fff;
  transform: translateY(-3px);
}

.contact-item {
  display: flex;
  align-items: flex-start;
}

.contact-item i {
  margin-top: 0.25rem;
  width: 1.5rem;
  flex-shrink: 0;
}

.stat-item {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #66b3ff;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

.newsletter-section .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(10px);
}

.newsletter-section .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #66b3ff;
  color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(102, 179, 255, 0.25);
}

.newsletter-section .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.bg-darker {
  background-color: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-menu .footer-link {
  font-size: 0.875rem;
}

.footer-section {
  height: 100%;
}

.badge {
  font-size: 0.75rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .social-links {
    justify-content: center;
    margin-top: 1rem;
  }
  
  .stats-section .row {
    margin-bottom: 1rem;
  }
  
  .newsletter-section {
    margin-top: 2rem;
  }
  
  .footer-menu {
    margin-top: 1rem;
  }
  
  .footer-menu .footer-link {
    display: block;
    margin: 0.25rem 0;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-section {
  animation: fadeInUp 0.8s ease-out;
}

.footer-section:nth-child(2) {
  animation-delay: 0.1s;
}

.footer-section:nth-child(3) {
  animation-delay: 0.2s;
}

.footer-section:nth-child(4) {
  animation-delay: 0.3s;
}
</style>
